<template>
                        <!-- 开启盲盒显示信息 -->
	<view class="save-info"  v-if="inputinfo.wechat_number">
		
				<view class="online-status flex" >
					<view class="info">
						<view class="sp-view">
							<view class="save-title" >微信号 :&#12288; {{inputinfo.wechat_number}}</view>
							<!-- <input type="text" placeholder="记得开启微信号被搜索权限" v-model="input.wechat_number" class="input" :disabled="disabled" /> -->
						</view>
					</view>
					<image src="https://edu-myoss.oss-cn-guangzhou.aliyuncs.com/manghe/img/img_123.png" mode="heightFix"></image>
				</view>
        
        
				<view class="online-status flex"  style="background:#fffbee;">
					<view class="info">
						<view class="sp-view">
							<view class="save-title">性别<text>*</text></view>
							<view class="gender flex">
								<view class="item"  v-if="inputinfo.blind_sex == 1">
									<image src="../../static/img/head_boy.png" mode="widthFix"></image>男生
								</view>
								<view class="item"  v-if="inputinfo.blind_sex == 2" :class= 'active' >
									<image src="../../static/img/head_girl.png" mode="widthFix"></image>女生
								</view>
							</view>
						</view>
					</view>
					
				</view>
			
      
		
      <view class="online-status flex" >
      	<view class="info">
          
      		<view class="sp-view">
      			<view class="save-title">个人简介：</view>
      			<view class="textarea">        
      				<textarea  v-model="inputinfo.introduction" :disabled="disabled" /> 			
      			</view>
      		</view>
          
          
          <view class="sp-view">
          	<view class="save-title">手机号码 : &#12288; {{inputinfo.phone_number}}</view>
          <!-- 	<input type="tel"  maxlength="11" v-model="input.phone_number" class="input" :disabled="disabled" /> -->
          </view>
          
          <view class="btn" @click="" @click="savaInputInfo()">将信息存入盲盒历史</view>
      	</view>
      	<!-- <image src="../../static/img/img_123.png" mode="heightFix"></image> -->
      </view>
		
		
			
		
	<!-- 			<view class="sp-view">
					<view class="tag flex">
						<text v-for="(item,index) in info.interesting_list" @tap="selectInterseting(item)" :class="input.interest.indexOf(item) != -1 ? 'active' : ''">{{item}}</text>
					</view>
				</view> -->
			
			
				
			<!-- 	<view class="btn disabled" v-if="info.blind_status.is_blind == 0">等待审核中</view>
				<view class="btn" @tap.stop="unSave">下架我的盲盒</view> -->
			
		<!-- <pay-code ref="pay-code" @call="payCodeCall"></pay-code> -->
	</view>
 
</template>

<script>
  // 1. 按需导入 mapMutations 辅助函数
  import { mapMutations,mapState } from 'vuex'
	export default {
		data() {
			return {
         btn : false,
        arrys: [],
				// systemInfo: uni.getSystemInfoSync(),
				// showMoreInfo:false,
				// info:null, //基本信息
				inputinfo:{ //用户需要输入的信息
					wechat_number:"",
					// interest:[],
					introduction:"",
					phone_number:"",
					blind_sex:'',
					// photos:[],
				},
        blind_sex1 : ''
			}
		},
		computed:{
      ...mapState('m_user',['input'])
	
		
		},
    onLoad(options) {
      this.btn = false
      this.blind_sex1 = options.blind_sex
      console.log(this.blind_sex1)
		  this.dataGetCloud()
		},
		methods: {
            ...mapMutations('m_user', ['updateinput']),
      //将盲盒信息保存的阿里云服务数据库中
      
     dataGetCloud(e){
       if(this.blind_sex1 == 1){
         uniCloud.callFunction({
           name:'h5-getUser',
           success:(e)=> {   
             let number  =  Math.floor(Math.random()* (e.result.data.length))  
             console.log(e.result.data)
            this.inputinfo = e.result.data[number]
           }
         })
       }else{ 
         uniCloud.callFunction({
       name:'h5-getUser2',
       success:(e)=> {
         
         let number  =  Math.floor(Math.random()* (e.result.data.length))  
         console.log(e.result.data)
        this.inputinfo = e.result.data[number]
       }
     })}
    
     },

			//性别选择
			sexChange(sex){
				this.inputinfo.blind_sex = sex;
			},
					
	  //点击保存盲盒开启历史到内存
     savaInputInfo(){
       if(this.btn==true){
         return
       }
       
       
        this.input.push(this.inputinfo)
        this.updateinput(this.input)
       this.delayNavigate()
    
    this.btn = true
    
       
     },
        // 展示倒计时的提示消息
      showTips(n) {
        // 调用 uni.showToast() 方法，展示提示消息
        uni.reLaunch({
          
        
          // 不展示任何图标
          icon: 'none',
          // 提示的消息
          title: '保存成功！',
          // 为页面添加透明遮罩，防止点击穿透
          mask: true,
          // 1.5 秒后自动消失
          duration: 1000
        })
      },
      // 延迟导航到 my 页面
      delayNavigate() {
        
         // 把 data 中的秒数重置成 3 秒,在执行此方法时，立即将 seconds 秒数重置为 3 即可
          this.seconds = 1
        // 1. 展示提示消息，此时 seconds 的值等于 3
        this.showTips(this.seconds)
      
        // 2. 创建定时器，每隔 1 秒执行一次
        // 1. 将定时器的 Id 存储到 timer 中
         this.timer = setInterval(() => {
          // 2.1 先让秒数自减 1
          this.seconds--
          // 2. 判断秒数是否 <= 0
          if (this.seconds <= 0) {
         // 2.1 清除定时器
            clearInterval(this.timer)
            // 2.2 跳转到 my 页面
                 
                  uni.switchTab({
                    // 要导航到的页面地址
                    url: '/pages/index/index'
                  }) 
           
              return
            }
          // 2.2 再根据最新的秒数，进行消息提示
          this.showTips(this.seconds)
        }, 1000)
      },
              
	},
 onBackPress(options) {
    console.log('options', options);
    if (options.from == 'backbutton') {
        return true;
    } else if (options.from == 'navigateBack') {
        return false;
    }
 }, 


		mounted(){
			// this.getData();
		},
	}
</script>

<style lang="scss" scoped>
	.save-info{
		min-height:100vh;
		background:#FFF;
		padding:20rpx 40rpx;
		.online-status{
      
			background:#fff6f6;
			flex-direction: row;
			align-items: center;
			margin:0 -20rpx;
			padding:30rpx 50rpx;
			border-radius:10rpx;
			.info{
				flex:1;
				width:0;
				.h3{
					font-weight:bold;
					font-size:32rpx;
					line-height:50rpx;
				}
				.p{
					color:#999;
					font-size:28rpx;
					line-height:50rpx;
					margin-top:10rpx;
				}
			}
			image{
				height:150rpx;
			}
		}
		.sp-view{
			margin-top:0rpx;
			.save-title{
				font-size:32rpx;
				line-height:50rpx;
				font-weight:bold;
				text{
					margin-left:12rpx;
					font-size:30rpx;
					color:#F30;
				}
			}
			.gender{
				flex-direction: row;
				margin-top:30rpx;
				.item{
					flex:1;
					width:0;
					font-size:28rpx;
					color:#707070;
					text-align: center;
					&.active{
						color:$background;
						font-weight:bold;
					}
					image{
						display: block;
						margin:0 auto;
						width:140rpx;
						margin-bottom:20rpx;
					}
				}
			}
			.input{
				font-size:28rpx;
				line-height:60rpx;
				padding:15rpx 30rpx;
				height:90rpx;
				border-radius:10rpx;
				border:1px solid #F1F1F1;
				display: block;
				margin-top:25rpx;
			}
			.textarea{
				position:relative;
				padding:20rpx 30rpx;
				border-radius:10rpx;
				border:1px solid #F1F1F1;
				margin-top:25rpx;
				textarea{
					font-size:28rpx;
					line-height:50rpx;
					height:170rpx;
					display: block;
					width:100%;
				}
				.photos{
					flex-direction: row;
					flex-wrap: wrap;
					margin-top:26rpx;
					margin-bottom:-10rpx;
					.item{
						margin-right:22rpx;
						margin-bottom:22rpx;
						width:calc((750rpx - 44rpx - 80rpx) / 4);
						height:120rpx;
						border-radius:10rpx;
						overflow:hidden;
						&:nth-child(3n){
							margin-right:0;
						}
						image{
							display:block;
							width:100%;
							height:100%;
						}
					}
				}
			}
			.tag{
				margin-top:30rpx;
				flex-direction: row;
				flex-wrap: wrap;
				margin-bottom:-25rpx;
				text{
					border:2rpx solid #d5d5d5;
					color:#4e4e4e;
					margin-right:25rpx;
					margin-bottom:25rpx;
					width:calc((100% - 50rpx) / 3);
					display:block;
					line-height:70rpx;
					text-align:center;
					border-radius:100rpx;
					font-size:28rpx;
					&.active{
						border:2rpx solid #7a57ff;
						color:#7a57ff;
					}
					&:nth-child(3n){
						margin-right:0;
					}
				}
			}
			.showMoreInfo{
				color:#b7b7b7;
				font-size:28rpx;
				line-height:35rpx;
				text-align:center;
				display: block;
			}
		}
		.btn{
			width:80%;
			background:$bodyBackgroundLine;
			color:#FFF;
			font-weight:bold;
			font-size:32rpx;
			margin:0 auto;
			margin-top:60rpx;
			margin-bottom:40rpx;
			line-height:100rpx;
			text-align:center;
			border-radius:100rpx;
			&:active{
				opacity: 0.8;
			}
			&.disabled{
				background: #eeeeee;
				color: #878787;
			}
		}
	}
</style>
